<template>
  <div>
    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="评审项目总数" :content="classifyList.length" :bordered="true"/>
        <head-info title="生产性建筑项目数" content="1" :bordered="true"/>
        <head-info title="非生产性建筑项目数" :content="classifyList.length-1"/>
      </div>
    </a-card>
    <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="评审列表"
    >
      <div slot="extra">
        <a-radio-group>
          <a-radio-button>全部</a-radio-button>
          <a-radio-button>生产性建筑</a-radio-button>
          <a-radio-button>非生产性建筑</a-radio-button>
        </a-radio-group>
      </div>
      <a-list size="large">
        <a-list-item :key="item.project_info_id" v-for="item in classifyList">
          <a-list-item-meta
              :description=item.project_tip
          >
            <a-avatar slot="avatar" size="large" shape="square"
                      src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"/>
            <a slot="title">{{ item.project_name }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <!-- 跳转到项目详情界面-->
            <a @click="goProjectInfo(item)">详情</a>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>创建时间</span>
              <p>{{ item.project_time }}</p>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '../../../components/tool/HeadInfo'
import Axios from "axios"

/**
 * 后端获取数据-专家组名称，简介
 * select review_name from review_tb where review_id in
 *    select review_id from specialist_review_rel_tb where specialist_id = ?
 * @type {string[]}
 */
// const projectNameList = ["项目1", "项目2", "项目3", "项目4"]
// const classifyList = []
// for (let i = 0; i < projectNameList.length; i++) {
//     classifyList.push({
//         id: i,
//         // 分类名
//         projectName: projectNameList[i],
//         // 分类介绍
//         synopsis: "测试类别介绍，巴拉巴拉巴拉巴拉",
//         creatTime: ''
//     })
// }

export default {
  name: 'ProjectClassification',
  components: {HeadInfo},
  data() {
    return {
      // 分类名
      projectName: '',
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      // 分类介绍
      synopsis: '',
      changeId: 0,
      classifyList: [],
      projectNameList: [],
      id: this.$store.state.reviewG_id
    }
  },
  mounted() {
    Axios.post(this.url + "/pxManagerSystem/getProjectsByReviewGroupId", {
      review_id: this.id
    }).then(
        res => {
          this.classifyList = res.data.data.projectInfolist;
          console.log(this.classifyList)
        }
    )
  },
  computed: {
    creatTime() {

      return new Date().toLocaleString()
    }
  },
  methods: {
    // 跳转到项目详情页面
    goProjectInfo(item) {
      this.$router.push({
        name: '申报项目详情',
        params: {
          project: item,
          visitor: 'specialist'
        }
      })
    },
    cleanText() {
      this.projectName = this.synopsis = ""
    },

  }
}
</script>

<style lang="less" scoped>
.list-content-item {
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin: 4px 0 0;
    line-height: 22px;
  }
}
</style>
